<template>
	<view class="noviceGuide">
		<navBar><template #title>玩法中心</template></navBar>
		<view class='secureCase'>
			<view class='acquisitionCard'>
				<view class="title">Q: 如何获得锦鲤AI算力机-K1</view>
				<view class="dat">

				</view>
				<view>
					<view class="SerialNumber">A</view>
				</view>
				<view class="center">
					<view class="text">
						我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是
						内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
					</view>
					<view class="text">
						我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是
						内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
					</view>
					<view class="figure">

					</view>
				</view>
			</view>
			<view class='acquisitionCard last'>
				<view class="title">Q: 如何获得锦鲤AI算力机-K1</view>
				<view class="dat"></view>
				<view>
					<view class="SerialNumber">B</view>
				</view>
				<scroll-view class="center" scroll-y :show-scrollbar='true'>
					<view class="text">
						我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是
						内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
					</view>
					<view class="figure"></view>
					<view class="figure"></view>
					<view class="text">
						我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是
						内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script setup lang='ts'>
	import navBar from '../../components/mine/navBar/index.vue'
</script>

<style scoped lang="scss">
	.noviceGuide {
		.acquisitionCard {
			position: relative;
			display: flex;
			margin-top: 16px;
			height: 635px;
			padding: 66px 32px;
			box-sizing: border-box;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 24px;
			border: 1px solid #FFFFFF;
			color: white;

			.title {
				position: absolute;
				left: 32px;
				top: 0%;
				transform: translateY(-50%);
				display: flex;
				align-items: center;
				width: 80%;
				height: 64px;
				background: #4E47FF;
				border-radius: 16px;
				border: 1px solid #FFFFFF;
				font-size: 24px;
				text-indent: 1em;
			}

			.dat {
				position: absolute;
				right: 5%;
				top: 5%;
				width: 22px;
				height: 22px;
				background: #4E47FF;
				border-radius: 50%;
			}

			.SerialNumber {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32px;
				width: 48px;
				height: 48px;
				// padding: 10px;
				background: #4E47FF;
				border-radius: 40px;
			}

			.center {
				margin-left: 16px;
				font-size: 26px;

				.text {
					margin: 10px 0;
				}

				.figure {
					height: 209px;
					background: rgba(255, 255, 255, 0.1);
					border-radius: 24px;
					margin-top: 20px;
					background:url('/static/images/Banner-2.png');
					background-size: 100% 100%;
				}
			}
		}

		.last {
			margin-top: 60px;

			.center {
				::v-deep::-webkit-scrollbar {
					//隐藏scroll-view里面自带的滚动条
					display: block; //必加
					width: 0 !important;
					height: 0 !important;
					-webkit-appearance: auto !important;
					background: transparent;
					overflow: auto !important;
				}
			}
		}
	}
</style>ss